<template>
  <div class="phone-number-container">
    <el-form ref="form" label-position="top" :model="phoneValidateForm" label-width="80px">
      <el-form-item prop="phoneNumber">
        <el-row :gutter="10">
          <el-col :xs="16" :sm="16" :md="16" :lg="10" :xl="10">
            <el-input
              v-model="phoneValidateForm.phoneNumber"
              size="medium"
              :required="open"
              maxlength="11"
              clearable
              :suffix-icon="codeIsTrue ? 'el-icon-check' : ''"
              placeholder="请输入手机号完成验证"
              @click="openDialogHandle"
            >
            </el-input>
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="8" :xl="8">
            <el-button :disabled="phoneValidateCodeBtn" @click="sendValidateMsgHandle">
              {{ phoneValidateCodeBtnText }}
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item v-if="open" prop="code" class="code">
        <el-row :gutter="10">
          <el-col :xs="16" :sm="16" :md="16" :lg="10" :xl="10">
            <el-input v-model="phoneValidateForm.code" v-on:blur="codeCheck" clearable prefix-icon="el-icon-message" />
          </el-col>
          <el-col :xs="6" :sm="6" :md="6" :lg="8" :xl="8">
            <!--            <el-button @click="open = false">取 消</el-button>-->
            <el-button type="" :disabled="codeBool" @click="validateCodeHandle">确 认</el-button>
          </el-col>
        </el-row>
        <span> </span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Popup } from 'vant'
import 'vant/lib/popup/style'
import mixin from './mixin'

export default {
  name: 'MobilePhoneVerification',
  components: {
    [Popup.name]: Popup
  },
  mixins: [mixin]
}
</script>
<style lang="scss" scoped>
.code {
  margin-top: 10px;
}
</style>
